<template>
  <el-menu class="navbar" mode="horizontal">
    <!-- <Hamburger
      :toggle-click="toggleSideBar"
      :is-active="sidebar.opened"
      class="hamburger-container"
    /> -->
    <div class="navbar-title">
      <img :src="avatar" class="user-avatar" />
      <h1>Hi，欢迎登录 <span>灰兔智能管理后台！</span></h1>
      <img src="@/assets/hi-icon.png" class="navbar-icon" alt="" />
    </div>
    <!-- <SiteNav /> -->
    <!-- <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper">
        <img :src="avatar" class="user-avatar" />
        <span>欢迎你，{{ name }}</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <el-dropdown-menu slot="dropdown" class="user-dropdown">
        <router-link class="inlineBlock" to="/">
          <el-dropdown-item>首页</el-dropdown-item>
        </router-link>
      </el-dropdown-menu>
    </el-dropdown> -->
    <div class="log-out" @click="logout">
      <img src="@/assets/log-out.png" alt="" />
      <span>退出登录</span>
    </div>
  </el-menu>
</template>

<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
import SiteNav from '@/components/SiteNav'
// import { redirectToOA } from '@/utils'
import { removeToken } from '@/utils/auth'

export default {
  data() {
    return {}
  },
  components: {
    // Hamburger
    // SiteNav
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'name'])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      removeToken()
      this.$router.push({ path: '/login' })
      // this.$store.dispatch('LogOut').then(() => {
      //   // redirectToOA()
      //   this.$router.push({ path: '/login' })
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.navbar {
  height: 63px;
  line-height: 63px;
  border-bottom: none !important;
  // box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
  border-radius: 0px !important;
  background-color: #ebf0fa;
  display: flex;
  margin: 0 20px;
  .hamburger-container {
    height: 63px;
    line-height: 70px;
    float: left;
    padding: 0 30px;
  }
  .navbar-title {
    display: flex;
    align-items: center;
    .user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid #fff;
    }
    .navbar-icon {
      width: 20px;
      height: 20px;
    }
    h1 {
      font-size: 20px;
      margin: 0 0 0 10px;
      color: #879fdf;
      span {
        color: #1677ff;
      }
    }
  }
  .log-out {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: auto;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      padding-left: 5px;
    }
  }
  .screenfull {
    position: absolute;
    right: 90px;
    top: 16px;
    color: red;
  }
  .avatar-container {
    height: 63px;
    display: inline-block;
    position: absolute;
    right: 35px;
    .avatar-wrapper {
      cursor: pointer;
      display: flex;
      align-items: center;
      .user-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
      }
      span {
        color: #252b33;
        margin: 0 10px;
      }
    }
  }
}
</style>
